<template>
  <div class="layui-container" >
    <canvas id="canvasBg" width="1600" height="900"></canvas>
  </div>
</template>
<script>
/* eslint-disable indent */

  import router from '../router/index.js'
import axios from 'axios'
axios.defaults.withCredentials=true
export default {
  data () {
    return {}
  },
  mounted(){
    console.log('test')
    let isDown = false;
    let points = [];
    let beginPoint = null;
    let canvas=document.getElementById('canvasBg')
    const ctx = canvas.getContext('2d');
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 1;
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';

    canvas.addEventListener('mousedown', down, false);
    canvas.addEventListener('mousemove', move, false);
    canvas.addEventListener('mouseup', up, false);
    canvas.addEventListener('mouseout', up, false);

    function down(evt) {
      console.log('down')
      isDown = true;
      const { x, y } = getPos(evt);
      points.push({x, y});
      beginPoint = {x, y};
    }

    function move(evt) {
      if (!isDown) return;

      const { x, y } = getPos(evt);
      points.push({x, y});

      if (points.length > 3) {
        const lastTwoPoints = points.slice(-2);
        const controlPoint = lastTwoPoints[0];
        const endPoint = {
          x: (lastTwoPoints[0].x + lastTwoPoints[1].x) / 2,
          y: (lastTwoPoints[0].y + lastTwoPoints[1].y) / 2,
        }
        drawLine(beginPoint, controlPoint, endPoint);
        beginPoint = endPoint;
      }
    }

    function up(evt) {
      console.log('up')
      if (!isDown) return;
      const { x, y } = getPos(evt);
      points.push({x, y});
      if (points.length > 3) {
        const lastTwoPoints = points.slice(-2);
        const controlPoint = lastTwoPoints[0];
        const endPoint = lastTwoPoints[1];
        drawLine(beginPoint, controlPoint, endPoint);
      }
      beginPoint = null;
      isDown = false;
      points = [];
    }

    function getPos(evt) {
      return {
        x: evt.clientX,
        y: evt.clientY
      }
    }

    function drawLine(beginPoint, controlPoint, endPoint) {
      ctx.beginPath()
      ctx.moveTo(beginPoint.x, beginPoint.y);
      ctx.quadraticCurveTo(controlPoint.x, controlPoint.y, endPoint.x, endPoint.y);
      ctx.stroke();
    }
  },
  methods: {
  }
}
</script>
<style>
.login{
    width: 100vw;
    height: 100vh;
    background: #00b8ff;
}
.box-card{
    width: 480px;
    position: absolute;
    top:200px;
    left:50%;
    transform: translateX(-50%);
}
.box-card>.title{
    font-size: 28px;
}
.form-box{
    width: 350px;
}
.loginBtn{
    width: 100%;
}

.layui-container {width: 100%;height: 100%;overflow: hidden}
.admin-login-background {width:360px;height:300px;position:absolute;left:50%;top:40%;margin-left:180px;margin-top:-100px;}
.logo-title {text-align:center;letter-spacing:2px;padding:14px 0;}
.logo-title h1 {color:#34417c;font-size:25px;font-weight:bold;}
.login-form {background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;}
.login-form .layui-form-item {position:relative;}
.login-form .layui-form-item label {position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2;}
.login-form .layui-form-item input {padding-left:36px;}
.captcha {width:60%;display:inline-block;}
.captcha-img {display:inline-block;width:34%;float:right;}
.captcha-img img {height:34px;border:1px solid #e6e6e6;height:36px;width:100%;}
</style>
